<!--
  封装好的级联选择器
  用法：
     <qm-cascader
         v-model="area"
         :props="{ expandTrigger: 'hover' }"
         data-type="china"
         @change="change"
     ></qm-cascader>
  说明：
    area：数组形式的数据,例：["广东", "广州","黄埔区"]
    关于数据的存储和回显，参考JSON.stringify(area)、JSON.parse(Area)
    data-type: 切换类型。area(默认):国内包含地区,global:国内加国外,china:国内省市,province:省份
-->
<template>
  <div>
    <el-cascader
      v-model="cityValue"
      :options="options"
      :disabled="disabled"
      :show-all-levels="showAllLevels"
      size="small"
      :props="props"
      :placeholder="placeholder"
      @change="change"
      @expand-change="expandChange"
      @blur="blur"
      @focus="focus"
      @visible-change="visibleChange"
      @remove-tag="removeTag"
      filterable
    ></el-cascader>
  </div>
</template>

<script>
import Data from "./initialization";

//定义固定使用类型
const global = "global"; //国内加国外
const area = "area"; //国内包含地区
const china = "china"; //国内省市
const province = "province"; //国内省

/*兼容其他数据源不一致的数据*/
//过滤省正则
const filterProvince = /省|壮族|回族|维吾尔|特别行政区|自治区/g;
//过滤市区正则
const filterCity =
  /市|地区|朝鲜族自治州|哈尼族自治县|彝族自治州|哈尼族彝族自治州|壮族苗族自治州|傣族自治州|白族自治州|傣族景颇族自治州|藏族自治州|傈僳族自治州|回族自治州|藏族自治州|蒙古族藏族自治州|蒙古自治州|哈萨克自治州|藏族羌族自治州|苗族侗族自治州|依族苗族自治州|土家族苗族自治州/g;

export default {
  name: "qm-cascader",
  //调用change函数时会改变value
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    showAllLevels: {
      type: Boolean,
      default: true,
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    //默认国内地区
    dataType: {
      type: String,
      default: "area",
    },
    placeholder: {
      type: String,
      default: "请选择国家或者地区",
    },
  },
  data() {
    return {
      cityValue: [],
      options: [],
    };
  },
  watch: {
    value: {
      handler: function (val) {
        if (val && !_.isArray(val)) {
          val = [val];
        }
        let city = (val || []).map((e, i) => {
          if (i == 2) {
            if (e.indexOf("香港") != -1) {
              e = "中国香港";
            }
            if (e.indexOf("澳门") != -1) {
              e = "中国澳门";
            }
          }
          e = e.replace(filterCity, "");
          e = e.replace(filterProvince, "");
          return e;
        });
        this.cityValue = city;
      },
      //深度监听
      deep: true,
      //初始化时监听
      immediate: true,
    },
  },
  mounted() {
    //判断类型
    switch (this.dataType) {
      case global:
        this.options = Data.cityOption;
        break;
      case area:
        this.options = Data.areaOption;
        break;
      case china:
        this.options = Data.domesticOption;
        break;
      case province:
        this.options = Data.provinceOption;
        break;
    }
  },
  methods: {
    change(val) {
      this.$emit("change", val);
    },
    expandChange(val) {
      this.$emit("expand-change", val);
    },
    blur(val) {
      this.$emit("blur", val);
    },
    focus(val) {
      this.$emit("focus", val);
    },
    visibleChange(val) {
      this.$emit("visible-change", val);
    },
    removeTag(val) {
      this.$emit("remove-tag", val);
    },
  },
};
</script>

<style>
</style>
